<template>
  <div class="wrapper" ref="wrapper">
          <slot></slot>
  </div>
</template>

<script>
import {ref,onMounted} from 'vue'
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullDown)
BScroll.use(ObserveImage)
BScroll.use(ObserveDOM)
BScroll.use(Pullup)
export default {
  name:'Scroll',
  props:{
     probeType:{
         type:Number,
         default:0
     },
     pullUpLoad:{
         type:Boolean,
         default:false
     },
    observeDom:{
        type:Boolean,
        default:false
    },
    observeImage:{
        type:Boolean,
        default:false
     },
     pullDownRefresh:{
         type:Boolean,
         default:false
     }
  },
  emit:['scroll','pullingUp','pullingdown'],
  setup(props,context){
     let scroll= ref(null)
     let wrapper = ref(null)
     onMounted(()=>{
         scroll = new BScroll(wrapper.value,{
          probeType:props.probeType,
          click:true,
          pullUpLoad:props.pullUpLoad,
          observeDom:props.observeDom,
          observeImage:props.observeImage,
          pullDownRefresh:props.pullDownRefresh
         })
         scroll.on('scroll',(position)=>{
            context.emit('scroll',position)
         })
         scroll.on('pullingUp',()=>{
             context.emit('pullingUp')
            //  scroll.finishPullUp();
         })
     })
     function finishPullUp(){
         scroll.finishPullUp();
     }
     return {
         scroll,
         wrapper,
         finishPullUp
     }
  }
}
</script>

<style>

</style>